<template>
  <div style="padding-top: 10px;padding-bottom: 80px">
    <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in props.userList">
      <van-card style="width: 280px;margin:10px 10px;border-style: solid;border-width:1px;border-radius: 15px"


                :tag="user.gender==0?'女':'男'"
                :desc="user.profile"
                :title="user.username"
                :thumb="user.avatarUrl"
      >
        <template #tags>
          <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 5px;margin-top: 5px;">{{
              tag
            }}
          </van-tag>

        </template>
        <template #footer>
          <van-button size="mini">联系我</van-button>
        </template>
      </van-card>
    </van-skeleton>


  </div>


</template>
<script setup lang="ts">
interface userCardListProps {
  userList: UserInfo[],
  loading: boolean
}

const props = withDefaults(defineProps<userCardListProps>(), {
  loading: true,
  userList: []
})
</script>

<style scoped>

</style>